@charset "utf-8";
$font-size:20px;
@function s($px) {
    @return $px/$font-size*(375/640)*1rem;
}

html {
    font-size: $font-size;
}

.web {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(../images/beijingX.png);
    background-repeat: no-repeat;
    background-size: cover;
    header {
        position: absolute;
        width: 100%;
        height: 6%;
        top: 0;
        left: 0;
        .music {
            color: #e7c598;
            position: absolute;
            right: s(25px);
            bottom: s(2px);
            font-size: 30px;
            z-index: 99;
        }
    }
    section {
        position: absolute;
        width: 100%;
        height: 84%;
        box-sizing: border-box;
        padding: 0 s(35px);
        top: 6%;
        left: 0;
        overflow: hidden;
        overflow-y: auto;
        .text {
            .title {
                font-size: s(30px);
                color: #e7c598;
                line-height: s(50px);
            }
            .content {
                font-size: s(24px);
                color: #e7c598;
                text-align: justify;
                line-height: s(34px);
            }
        }
    }
    footer {
        position: absolute;
        width: 100%;
        height: 10%;
        bottom: 0;
        left: 0;
        //按钮
        .btn {
            color: #e2ac88;
            display: block;
            position: relative;
            margin: 0 auto;
            text-align: center;
            margin-top: 5px;
            width: s(318px);
            .btnfont {
                width: s(318px);
                box-sizing: border-box;
                background: url(../images/kuang.png) round;
                padding: 5px 5px;
                font-size: s(24px);
            }
        }
        //首页图标
        .home {
            font-size: s(30px);
            color: #bf0c21;
            line-height: s(41px);
            width: s(41px);
            height: s(41px);
            border-radius: 100%;
            background: #e7c598;
            position: absolute;
            bottom: s(30px);
            right: s(40px);
            text-align: center;
            box-shadow: 1px 2px 5px #000;
        }
    }
}


/**************音乐旋转效果**************/

.icon-yinle1 {
    display: inline-block;
    animation: music 5s linear infinite;
}

@-webkit-keyframes music {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes music {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}